<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>悬浮客服机器人</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        /* 优化后的CSS样式 */
        #robot-container {
            position: fixed;
            right: 30px;
            bottom: 30px;
            z-index: 9999;
            cursor: pointer;
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        #robot-icon {
            width: 60px;
            height: 60px;
            background: #2196F3;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
            animation: float 3s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        #robot-icon:hover {
            transform: scale(1.1) translateY(-5px);
        }

        /* 对话框核心样式优化 */
        #robot-dialog {
            position: fixed;
            z-index: 10000;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) scale(0.95);
            width: min(90%, 800px);
            min-width: 400px;
            height: min(80vh, 600px);
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 24px 48px rgba(0,0,0,0.2);
            opacity: 0;
            visibility: hidden;
            transition:
                    opacity 0.3s ease,
                    transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55),
                    visibility 0.3s;
            overflow: hidden;
        }

        #robot-dialog.active {
            opacity: 1;
            visibility: visible;
            transform: translate(-50%, -50%) scale(1);
            display: block;
        }

        .dialog-header {
            padding: 18px 24px;
            background: linear-gradient(135deg, #2196F3, #1976D2);
            color: white;
            border-radius: 16px 16px 0 0;
            font-size: 1.1em;
            position: relative;
        }

        .dialog-body {
            padding: 20px;
            height: calc(100% - 62px);
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: #90CAF9 #e0e0e0;
            position: relative;
        }

        .dialog-body::-webkit-scrollbar {
            width: 8px;
        }

        .dialog-body::-webkit-scrollbar-thumb {
            background: #90CAF9;
            border-radius: 4px;
        }

        .close-btn {
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10001;
            cursor: pointer;
            transition: all 0.2s ease;
            padding: 4px;
            line-height: 1;
        }

        .close-btn:hover {
            opacity: 0.8;
            transform: translateY(-50%) scale(1.1);
        }

        #mask {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.2); /* 半透明黑色背景 */
            z-index: 9999; /* 确保在背景之上，弹窗之下 */
            display: none; /* 初始隐藏 */
        }

        @media (max-width: 480px) {
            #robot-dialog {
                width: 95%;
                min-width: unset;
                height: 85vh;
            }

            .dialog-header {
                padding: 14px 20px;
            }
        }
    </style>
</head>
<body>

<div id="robot-container">
    <div id="robot-icon">
        <i class="fas fa-robot fa-2x" style="color: white;"></i>
    </div>
</div>

<div id="robot-dialog">
    <div class="dialog-header">
        智能客服助手
        <span class="close-btn">×</span>
    </div>
    <div class="dialog-body">
        <p>您好！请问有什么可以帮助您？</p>
        <!-- 示例内容 -->
        <div style="height: 1200px"><!-- 测试滚动条 --></div>
    </div>
</div>

<!-- 遮罩层 -->
<div id="mask"></div>

<script>
    $(function() {
        // 对话框状态管理
        let isDialogOpen = false;

        // 机器人点击交互
        $('#robot-container').click(function() {
            if (!isDialogOpen) {
                $('#robot-dialog').addClass('active');
                $('#mask').css('display', 'block');
                isDialogOpen = true;

                // 容器微交互
                $(this).css('transform', 'scale(0.9)');
            }
        });

        // 关闭对话框优化
        $('.close-btn').click(function(e) {
            e.stopPropagation();
            $('#robot-dialog').removeClass('active');
            $('#mask').css('display', 'none');
            isDialogOpen = false;

            // 恢复机器人状态
            $('#robot-container').css('transform', 'none');
        });

        $('#robot-dialog').css('display', 'block');
        $('#mask').css('display', 'none');

        // 响应式窗口处理
        let resizeTimer;
        $(window).on('resize', function() {
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout(() => {
                if (isDialogOpen) {
                    $('#robot-dialog').removeClass('active').addClass('active');
                }
            }, 100);
        });

        // 点击外部关闭
        $(document).on('click', function(e) {
            if (isDialogOpen &&
                !$(e.target).closest('#robot-dialog,#robot-container').length) {
                $('.close-btn').trigger('click');
                $('#mask').css('display', 'none');
            }
        });
    });
</script>

</body>
</html>